<template>
    <div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import { api } from '@/api'
const { RequestStoreList } = api
onMounted(() => getShopStore())
/**
 * 获取商家信息
 */
const getShopStore = async () => {
    const data = await RequestStoreList()
    const { resultCode, resultInfo } = data
    if (resultCode === 1) {
        initMap(resultInfo.list)
    }
}

const initMap = shopList => {
    // 创建地图对象展示地图
    // eslint-disable-next-line no-undef
    const map = new BMapGL.Map('container')
    // eslint-disable-next-line no-undef
    const point = new BMapGL.Point(104.0477, 30.636651)
    map.centerAndZoom(point, 15)
    map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
    // 定位
    locationMap(map)
    // 绘制商家列表
    drawShopMp(shopList, map)
}

/**
 * 定位
 */
const locationMap = map => {
    const BMAP_STATUS_SUCCESS = 0 // 定位成功
    // eslint-disable-next-line no-undef
    const geolocation = new BMapGL.Geolocation()
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() === BMAP_STATUS_SUCCESS) {
            // eslint-disable-next-line no-undef
            const myIcon = new BMapGL.Icon(
                '../images/map_icon1.png',
                // eslint-disable-next-line no-undef
                new BMapGL.Size(20, 28)
            )
            // 创建标注对象并添加到地图
            // eslint-disable-next-line no-undef
            const mk = new BMapGL.Marker(r.point, { icon: myIcon })
            // var mk = new BMapGL.Marker(r.point) // 创建marker标注
            map.addOverlay(mk) // 添加标注到地图
            map.panTo(r.point) // 移动地图中心到标注位置
            // alert('您的位置：' + r.point.lng + ',' + r.point.lat)
        } else {
            alert('failed' + this.getStatus())
        }
    })
}

/**
 * 绘制商家列表
 */
const drawShopMp = (shopList, map) => {
    // 展示商家
    shopList.forEach(shop => {
        const gpsPoints = shop.location.split(',')
        // eslint-disable-next-line no-undef
        const point = new BMapGL.Point(gpsPoints[0], gpsPoints[1])
        // eslint-disable-next-line no-undef
        const mk = new BMapGL.Marker(point) // 创建marker标注
        map.addOverlay(mk) // 添加标注到地图

        const opts = {
            width: 250, // 信息窗口宽度
            height: 100, // 信息窗口高度
            title: shop.sname, // 信息窗口标题
        }
        const content = `<div class="g-info">
                     <img id="${shop.s_id}" src="${shop.url}" alt="${shop.s_id}">
                    <p>${shop.description}</p>
                </div>`
        // eslint-disable-next-line no-undef
        const infoWindow = new BMapGL.InfoWindow(content, opts) // 创建信息窗口对象
        mk.addEventListener('click', function () {
            this.openInfoWindow(infoWindow)
        })
    })
}
</script>

<style lang="scss" scoped>
#container {
    width: 100%;
    height: 100vh;

    // 因为我们的g-info是后添加的，也就是vue编译的时候它没赶上，data-xxx
    :deep(.g-info) {
        display: flex;
        img {
            width: 80px;
            height: 75px;
            margin-right: 10px;
        }
        p {
            flex: 1;
            display: -webkit-box; /*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
            -webkit-line-clamp: 3; /*设置多少行*/
            -webkit-box-orient: vertical; /*必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式*/
            overflow: hidden; /*文本会被修剪，并且剩余的部分不可见*/
            text-overflow: ellipsis; /*显示省略号来代表被修剪的文本*/
        }
    }
}
</style>
